CRUD新增:水費

2024 iThome 鐵人賽

DAY 21

自我挑戰組

asp.net可以變出那些功能系列第 21 篇

16th鐵人賽

Tzu

2024-09-28 07:01:41

104 瀏覽

分享至

https://laihao2.com/Home/WaterCreate

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>

參考昨天部分~

產生Models裡面類別檔dao>按:建置>

參考昨天部分~

Controllers裡面的Entities>

public ActionResult WaterCreate()
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
            return View();
        }
        //[AllowAnonymous]
        [HttpPost]
        //public ActionResult WaterCreate(WATER_BILL customer)
        //20240322新增PDF上傳

        public ActionResult WaterCreate(WATER_BILL customer, HttpPostedFileBase pdfFile)
        {
            //20240424文件大小超過 3MB跳出提示
            if (pdfFile != null && pdfFile.ContentLength > 3 * 1024 * 1024)
            {
                // 文件大小超過 3MB
                //ModelState.AddModelError("pdfFile", "上傳的 PDF 文件大小不能超過 2MB。");
                // 將錯誤訊息添加到 TempData,以便在視圖中顯示
                TempData["ErrorMessage"] = "上傳的 PDF 文件大小不能超過 3MB。";
                return View(customer);
            }

            if (ModelState.IsValid)
            {
                string custId = customer.DOCUMENT_ID;
                var temp = _db.WATER_BILL
                    .Where(m => m.DOCUMENT_ID == custId)
                    .FirstOrDefault();

                if (temp == null)
                {


                    // HomeController_20231226紀錄登打時間
                    //customer.data = DateTime.Now;

                    // 從 Session 讀取當前登錄用戶
                    //var username = Session["Member"] as tMember;

                    // 將當前登錄用戶賦值給 CreatedBy 屬性
                    //customer.CreatedBy = username.fUserId;


                    // 上傳PDF 檔案
                    if (pdfFile != null && pdfFile.ContentLength > 0)
                    {
                        // 讀取上傳的 PDF 檔案內容
                        var pdfContent = new byte[pdfFile.ContentLength];
                        pdfFile.InputStream.Read(pdfContent, 0, pdfFile.ContentLength);

                        // 將 PDF 檔案內容保存到模型中
                        customer.PDF_CONTENT = pdfContent;
                    }


                    _db.WATER_BILL.Add(customer);



                    _db.SaveChanges();  // 保存更改到資料庫
                    return RedirectToAction("WaterList");
                }

                ViewBag.Msg = "單據號碼重複";
            }

            // 如果模型驗證失敗，返回 View 以顯示錯誤消息
            return View(customer);
        }

解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器方法，負責處理一個叫做 WaterCreate 的表單提交。它涉及創建一個 WATER_BILL 實體對象並上傳 PDF 文件。下面是詳細解釋：

1. `public ActionResult WaterCreate()`

功能：這是一個 GET 方法，用於顯示創建 WATER_BILL 的視圖。
操作：設置視圖布局 ViewBag.Layout 為共享布局 _Layout.cshtml，然後返回視圖（表單頁面）。

2. `public ActionResult WaterCreate(WATER_BILL customer, HttpPostedFileBase pdfFile)`

功能：這是處理表單提交的 POST 方法，接收表單中的 WATER_BILL 對象 (customer) 和上傳的 PDF 文件 (pdfFile)。
參數：
- WATER_BILL customer: 表單中用戶填寫的 WATER_BILL 數據。
- HttpPostedFileBase pdfFile: 用戶上傳的 PDF 文件。

3. 文件大小檢查

if (pdfFile != null && pdfFile.ContentLength > 3 * 1024 * 1024)
{
    TempData["ErrorMessage"] = "上傳的 PDF 文件大小不能超過 3MB。";
    return View(customer);
}

功能：檢查上傳的 PDF 文件大小是否超過 3MB。
操作：如果文件超過 3MB，向 TempData 添加錯誤消息，返回視圖以顯示錯誤。

4. 檢查 `ModelState.IsValid`

功能：檢查模型驗證是否通過（是否符合定義的約束條件）。
操作：只有在表單數據有效時，才會繼續執行以下操作。

5. 檢查 `DOCUMENT_ID`

var temp = _db.WATER_BILL
    .Where(m => m.DOCUMENT_ID == custId)
    .FirstOrDefault();

if (temp == null)
{

功能：根據用戶提供的 DOCUMENT_ID 在數據庫中查找是否已有該記錄。
操作：如果沒有找到相同的 DOCUMENT_ID，即記錄不重覆，則繼續執行記錄創建流程。

6. 處理用戶登錄信息（已注釋）

注釋部分：從 Session 中讀取當前登錄用戶信息，並將其賦值給 CreatedBy 屬性以記錄創建者信息。

7. 處理 PDF 上傳

if (pdfFile != null && pdfFile.ContentLength > 0)
{
    var pdfContent = new byte[pdfFile.ContentLength];
    pdfFile.InputStream.Read(pdfContent, 0, pdfFile.ContentLength);

    customer.PDF_CONTENT = pdfContent;
}

功能：如果用戶上傳了 PDF 文件，將其內容讀入字節數組並保存到 WATER_BILL 模型中的 PDF_CONTENT 屬性。

8. 保存數據

_db.WATER_BILL.Add(customer);
_db.SaveChanges();

功能：將新的 WATER_BILL 對象添加到數據庫，並保存更改。

9. 重定向到 `WaterList`

操作：成功保存數據後，重定向到 WaterList 列表頁面。

10. 錯誤處理

ViewBag.Msg = "單據號碼重複";

功能：如果 DOCUMENT_ID 重覆，則在視圖中顯示錯誤消息。

11. 返回視圖

如果表單驗證失敗，或者其他條件未通過，返回原始視圖並顯示錯誤信息。

總結：

該方法負責處理水單創建的表單提交，包括檢查 PDF 文件大小、檢查單據號是否重覆、上傳 PDF 文件並將其內容保存到數據庫。如果成功，數據將被保存到 WATER_BILL 表中，並重定向到列表頁面；如果失敗，則返回視圖並顯示錯誤信息。

產生畫面View程式碼

@*@model IEnumerable<WebApplication5.Models.WATER_BILL>*@

@model WebApplication5.Models.WATER_BILL
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "WaterCreate";
}

<style>
    .align-right {
        text-align: right;
    }

    .nowrap {
        white-space: nowrap;
    }
</style>
<h2>新增</h2>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // 當FACTORY字段的值更改時
        $("#FACTORY").change(function () {
            // 獲取所選的FACTORY值
            var FACTORY = $(this).val();

            // 根據FACTORY的值設置相應的ELECTRICITY_SIGNAL選項
            if (FACTORY === "永科廠") {
                $("#WATER_SIGNAL").val("23-45678901-2");
                $("#METER_NUMBER").val("123D456780");
                $("#METER_DIAMETER").val("75");
            } else if (FACTORY === "永康廠") {
                $("#WATER_SIGNAL").val("12-34567890-1");
                $("#METER_NUMBER").val("123D456789");
                $("#METER_DIAMETER").val("40");
            }
            @*else if (FACTORY === "樹谷二期") {
                $("#WATER_SIGNAL").val("63-43233503-8");
                $("#METER_NUMBER").val("103G000227");
                $("#METER_DIAMETER").val("100");
            }*@
        });
    });
</script>

<script>
    $(document).ready(function () {

        // 為數字輸入框添加格式化事件
        $(".numeric-input").on("input", function () {
            formatNumberInput($(this));
        });


        // 提交表單時移除千位分隔符
        $("form").submit(function () {
            $(".numeric-input").each(function () {
                $(this).val($(this).val().replace(/,/g, ''));
            });
        });
    });

    // 格式化數字輸入框的值
    /*function formatNumberInput(input) {
        var val = input.val().replace(/,/g, ''); // 移除現有的千位分隔符
        if (val != '') {
            val = parseInt(val); // 確保輸入是一個數值
            input.val(val.toLocaleString()); // 使用toLocaleString()添加千位分隔符
        }
    }*/
    // 格式化數字輸入框的值
    function formatNumberInput(input) {
        var val = input.val().replace(/,/g, ''); // 移除現有的千位分隔符
        if (val != '') {
            var parts = val.split('.'); // 將輸入值拆分為整數部分和小數部分
            parts[0] = parseInt(parts[0]).toLocaleString(); // 格式化整數部分
            input.val(parts.join('.')); // 重新組合並設置輸入框的值
        }
    }

</script>
@*20240424增加上傳檔案超過3MB提示 *@
<script>
    $(document).ready(function () {
        $('form').submit(function () {
            var file = $('.pic-upload-input')[0].files[0];
            if (file && file.size > 3 * 1024 * 1024) {
                alert('上傳的 PDF 文件大小不能超過 2MB。');
                return false; // 防止表單提交
            }
        });
    });
</script>


@if (ViewBag.Msg != null)
{
    <div class="alert alert-danger">@ViewBag.Msg</div>
}
@*20240325增加上傳檔案 *@
@*@using (Html.BeginForm()) *@

@using (Html.BeginForm("WaterCreate", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-inline">
        <h4>水費帳單</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.DOCUMENT_ID, htmlAttributes: new { @class = "control-label" })

            @Html.EditorFor(model => model.DOCUMENT_ID, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DOCUMENT_ID, "", new { @class = "text-danger" })
        </div>



        <div class="form-group">
            @Html.LabelFor(model => model.FACTORY, htmlAttributes: new { @class = "control-label" })
            @{
                var listItemsFACTORY = new List<SelectListItem>
{
                    new SelectListItem { Text = "永康廠", Value = "永康廠", Selected = true },
                    @*new SelectListItem { Text = "樹谷一期", Value = "樹谷一期", Selected = true },*@
                    new SelectListItem { Text = "永科廠", Value = "永科廠" }
                };
            }
            @Html.DropDownList("FACTORY", listItemsFACTORY, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.FACTORY, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.WATER_SIGNAL, htmlAttributes: new { @class = "control-label" })

            @Html.EditorFor(model => model.WATER_SIGNAL, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
            @Html.ValidationMessageFor(model => model.WATER_SIGNAL, "", new { @class = "text-danger" })
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.FROM_BILLING_PERIOD, htmlAttributes: new { @class = "control-label" })

            @Html.EditorFor(model => model.FROM_BILLING_PERIOD, new { htmlAttributes = new { @class = "form-control", type = "date" } })
            @Html.ValidationMessageFor(model => model.FROM_BILLING_PERIOD, "", new { @class = "text-danger" })
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.UNTIL_BILLING_PERIOD, htmlAttributes: new { @class = "control-label" })

            @Html.EditorFor(model => model.UNTIL_BILLING_PERIOD, new { htmlAttributes = new { @class = "form-control", type = "date" } })
            @Html.ValidationMessageFor(model => model.UNTIL_BILLING_PERIOD, "", new { @class = "text-danger" })
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.TYPE, htmlAttributes: new { @class = "control-label" })
            @{
                var listItemsTYPE = new List<SelectListItem>
{
                    new SelectListItem { Text = "普通", Value = "普通", Selected = true },
                    new SelectListItem { Text = "工業", Value = "工業" }
                };
            }
            @Html.DropDownList("TYPE", listItemsTYPE, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.TYPE, "", new { @class = "text-danger" })
        </div>



        <div class="form-group">
            @Html.LabelFor(model => model.METER_NUMBER, htmlAttributes: new { @class = "control-label" })


            @Html.EditorFor(model => model.METER_NUMBER, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
            @Html.ValidationMessageFor(model => model.METER_NUMBER, "", new { @class = "text-danger" })
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.METER_DIAMETER, htmlAttributes: new { @class = "control-label" })

            @Html.EditorFor(model => model.METER_DIAMETER, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
            @Html.ValidationMessageFor(model => model.METER_DIAMETER, "", new { @class = "text-danger" })
        </div>


        @*<div class="form-group">
                @Html.LabelFor(model => model.NUMBER_POINTERS, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.NUMBER_POINTERS, "", new { @class = "text-danger" })
            </div>*@
        @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
        <div class="form-group">
            @Html.LabelFor(model => model.NUMBER_POINTERS, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.NUMBER_POINTERS, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
            @Html.ValidationMessageFor(model => model.NUMBER_POINTERS, "", new { @class = "text-danger" })
        </div>


        @*<div class="form-group">
                @Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.TOTAL_WATER, "", new { @class = "text-danger" })
            </div>*@
        @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
        <div class="form-group">
            @Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
            @Html.ValidationMessageFor(model => model.TOTAL_WATER, "", new { @class = "text-danger" })
        </div>

        @*<div class="form-group">
                @Html.LabelFor(model => model.TOTAL_BILL_TAX, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.TOTAL_BILL_TAX, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.TOTAL_BILL_TAX, "", new { @class = "text-danger" })
            </div>*@

        @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
        <div class="form-group">
            @Html.LabelFor(model => model.TOTAL_BILL_TAX, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.TOTAL_BILL_TAX, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
            @Html.ValidationMessageFor(model => model.TOTAL_BILL_TAX, "", new { @class = "text-danger" })
        </div>
        @*<div class="form-group">
                @Html.LabelFor(model => model.CARBON_PERIOD, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.CARBON_PERIOD, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.CARBON_PERIOD, "", new { @class = "text-danger" })
            </div>*@
        @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
        <div class="form-group">
            @Html.LabelFor(model => model.CARBON_PERIOD, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.CARBON_PERIOD, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
            @Html.ValidationMessageFor(model => model.CARBON_PERIOD, "", new { @class = "text-danger" })
        </div>

        @*<div class="form-group">
                @Html.LabelFor(model => model.CARBON_EMISSION_FACTOR, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.CARBON_EMISSION_FACTOR, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.CARBON_EMISSION_FACTOR, "", new { @class = "text-danger" })
            </div>*@
        @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
        <div class="form-group">
            @Html.LabelFor(model => model.CARBON_EMISSION_FACTOR, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.CARBON_EMISSION_FACTOR, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
            @Html.ValidationMessageFor(model => model.CARBON_EMISSION_FACTOR, "", new { @class = "text-danger" })
        </div>

        @*<div class="form-group">
                @Html.LabelFor(model => model.CARBON_DIOXIDE, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.CARBON_DIOXIDE, new { htmlAttributes = new { @class = "form-control  align-right" } })
                @Html.ValidationMessageFor(model => model.CARBON_DIOXIDE, "", new { @class = "text-danger" })
            </div>*@

        @*20240327在框中顯示千位分隔符號(例如"1,000")的格式*@
        <div class="form-group">
            @Html.LabelFor(model => model.CARBON_DIOXIDE, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.CARBON_DIOXIDE, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
            @Html.ValidationMessageFor(model => model.CARBON_DIOXIDE, "", new { @class = "text-danger" })
        </div>
        <!-- **** 20240327加入輸入傳票號碼**** -->
        <div class="form-group">
            @Html.LabelFor(model => model.VOUCHER_NUMBER, htmlAttributes: new { @class = "control-label" })

            @Html.EditorFor(model => model.VOUCHER_NUMBER, new { htmlAttributes = new { @class = "form-control  align-right" } })
            @Html.ValidationMessageFor(model => model.VOUCHER_NUMBER, "", new { @class = "text-danger" })
        </div>

        <div>
            <span class="editor-label">
                @Html.LabelFor(model => model.PDF_FILE):
            </span>
            <span class="editor-field">
                <!-- **** 檔案上傳 **** -->
                <input class="pic-upload-input" type="file" name="pdfFile">
                <!-- **** 檔案上傳 **** -->
            </span>
        </div>

        @*<div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="存檔" class="btn btn-danger" />
                </div>
            </div>*@

        <!-- 添加一個空div來留出空白 -->
        <div style="height: 50px;"></div>

        <div class="text-center">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="存檔" class="btn btn-danger" />
                </div>
            </div>
        </div>
    </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

解釋程式碼
這段程式碼是一個 ASP.NET MVC 的 Razor 視圖，用於顯示 "新增水費帳單" 的表單。以下是程式碼的詳細解釋：

1. 視圖標頭與佈局設置

@model WebApplication5.Models.WATER_BILL
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "WaterCreate";
}

@model 指定了該視圖的模型為 WebApplication5.Models.WATER_BILL，表示表單將操作一個 WATER_BILL 類型的物件。
Layout = "~/Views/Shared/_Layout.cshtml" 設置了該視圖使用的佈局頁。
ViewBag.Title 設置了該頁面的標題。

2. 樣式定義

<style>
    .align-right {
        text-align: right;
    }

    .nowrap {
        white-space: nowrap;
    }
</style>

定義了兩個簡單的樣式類，用於控制元素的對齊和換行行為。

3. 表單與事件處理

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#FACTORY").change(function () {
            var FACTORY = $(this).val();
            if (FACTORY === "永科廠") {
                $("#WATER_SIGNAL").val("23-45678901-2");
                $("#METER_NUMBER").val("123D456780");
                $("#METER_DIAMETER").val("75");
            } else if (FACTORY === "永康廠") {
                $("#WATER_SIGNAL").val("12-34567890-1");
                $("#METER_NUMBER").val("123D456789");
                $("#METER_DIAMETER").val("40");
            }
        });
    });
</script>

這段 jQuery 代碼用於監聽當工廠 (FACTORY) 欄位的值改變時，自動填充一些對應的水號 (WATER_SIGNAL)、水表號 (METER_NUMBER) 和水表直徑 (METER_DIAMETER) 值。

4. 千位數字格式化

<script>
    $(document).ready(function () {
        $(".numeric-input").on("input", function () {
            formatNumberInput($(this));
        });
        $("form").submit(function () {
            $(".numeric-input").each(function () {
                $(this).val($(this).val().replace(/,/g, ''));
            });
        });
    });

    function formatNumberInput(input) {
        var val = input.val().replace(/,/g, '');
        if (val != '') {
            var parts = val.split('.');
            parts[0] = parseInt(parts[0]).toLocaleString();
            input.val(parts.join('.'));
        }
    }
</script>

這段代碼為數字輸入框 (.numeric-input) 增加了千位分隔符的格式化功能，並確保在提交表單時去除千位分隔符以避免數據處理錯誤。

5. PDF 檔案大小檢查

<script>
    $(document).ready(function () {
        $('form').submit(function () {
            var file = $('.pic-upload-input')[0].files[0];
            if (file && file.size > 3 * 1024 * 1024) {
                alert('上傳的 PDF 文件大小不能超過 3MB。');
                return false;
            }
        });
    });
</script>

用於在表單提交前檢查上傳的 PDF 檔案是否超過 3MB，如果超過則提示用戶並阻止表單提交。

6. 表單的主要內容

@using (Html.BeginForm("WaterCreate", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <div class="form-inline">
        <h4>水費帳單</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        
        <!-- 文件上傳區域 -->
        <div class="form-group">
            <span class="editor-label">
                @Html.LabelFor(model => model.PDF_FILE):
            </span>
            <span class="editor-field">
                <input class="pic-upload-input" type="file" name="pdfFile">
            </span>
        </div>

        <!-- 其他輸入字段 -->
        <div class="form-group">
            @Html.LabelFor(model => model.DOCUMENT_ID, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.DOCUMENT_ID, new { htmlAttributes = new { @class = "form-control" } })
        </div>

        <!-- 數字輸入框，包含千位分隔符格式化 -->
        <div class="form-group">
            @Html.LabelFor(model => model.TOTAL_WATER, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.TOTAL_WATER, new { htmlAttributes = new { @class = "form-control numeric-input align-right" } })
        </div>
        
        <!-- 表單提交按鈕 -->
        <div class="text-center">
            <div class="form-group">
                <input type="submit" value="存檔" class="btn btn-danger" />
            </div>
        </div>
    </div>
}

使用 Html.BeginForm() 生成表單，enctype 設置為 multipart/form-data 允許文件上傳。
各個字段（如水號、帳單期間等）都使用 Html.EditorFor() 生成對應的輸入框，並伴隨相應的驗證信息 (ValidationMessageFor)。
一些字段（如總水量、稅金等）設置了千位分隔符的數字格式化功能。

7. 結尾部分

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Scripts.Render("~/bundles/jqueryval") 用於包含 jQuery 驗證腳本，確保表單驗證功能正常工作。

總結

這段程式碼用於顯示一個用戶介面的表單，讓用戶可以提交水費帳單信息。表單包括文件上傳、動態選項填充、數字輸入格式化等功能，並且內建了表單驗證與錯誤處理。

大家明天見~

CRUD列表:水費

CRUD修改:水費

系列文

asp.net可以變出那些功能共 30 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

asp.net可以變出那些功能系列 第 21 篇